/* 账户分析 */
<template>
  <div>
      <Tabs type="card" closable @on-tab-remove="handleTabRemove">
            <TabPane label="首页">
              首页
            </TabPane>
            <TabPane label="账户统计">
                <Card :bordered="false">
                    <p slot="title">一级机构账号统计</p>
                    <p>
                        <Row>
                            <Col span="12">
                                <Row  style="margin-bottom:10px" type="flex" justify="space-between">
                                    <Col span="5">
                                        <Select  multiple style="width:200px">
                                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                        </Select>
                                    </Col>
                                    <Col span="5">
                                        <Select multiple style="width:200px">
                                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                        </Select>
                                    </Col>
                                    <Col span="5">
                                        <Select  multiple style="width:200px">
                                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                        </Select>
                                    </Col>
                                    <Col span="2" offset="3" >
                                        <Button style="float:right" type="primary">查看</Button>
                                    </Col>
                                </Row>
                                 <Table height="270" :columns="columns1" :data="data1"></Table>
                                 <Page :total="100" show-total />
                            </Col>
                            <Col span="12">
                                 <Tabs value="name1">
                                    <TabPane label="饼状图" name="name1">
                                        <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
                                    </TabPane>
                                    <TabPane label="柱状图" name="name2">

                                    </TabPane>
                                    <TabPane label="折线图" name="name3">标签三的内容</TabPane>
                                </Tabs>
                            </Col>
                        </Row>
                    </p>
                </Card>
                 <Card :bordered="false">
                    <p slot="title">二级个人账号统计</p>
                    <p>
                        <Row>
                            <Col span="24">
                                <Row  style="margin-bottom:10px" >
                                    <Col span="3">
                                        <Select  multiple style="width:180px">
                                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                        </Select>
                                    </Col>
                                    <Col span="3">
                                        <Select multiple style="width:180px">
                                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                        </Select>
                                    </Col>
                                    <Col span="3">
                                        <Select  multiple style="width:180px">
                                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                        </Select>
                                    </Col>
                                    <Col span="3">
                                        <Select  multiple style="width:180px">
                                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                        </Select>
                                    </Col>
                                    <Col span="2" >
                                        <Button style="" type="primary">查看</Button>
                                    </Col>
                                </Row>
                                 <Row>
                                     <Col span="12">
                                      <Table height="270" :columns="columns1" :data="data1"></Table>
                                         <Page :total="100" show-total />
                                     </Col>
                                     <Col span="12">
                                        <Tabs value="name1">
                                            <TabPane label="标签一" name="name1">
                                                <div id="myChart1" :style="{width: '100%', height: '300px'}"></div>
                                            </TabPane>
                                            <TabPane label="柱状图" name="name2">
                                            <div id="myChartZhu" :style="{width: '100%', height: '200px'}"></div>
                                            </TabPane>
                                            <TabPane label="标签三" name="name3">标签三的内容</TabPane>
                                        </Tabs>
                                     </Col>
                                 </Row>

                            </Col>
                        </Row>

                    </p>
                </Card>
            </TabPane>
        </Tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityList: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        },
        {
          value: "Ottawa",
          label: "Ottawa"
        },
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ],
      columns1: [
        {
          title: "人员",
          key: "name"
        },
        {
          title: "Ip",
          key: "ip"
        },
        {
          title: "操作",
          key: "operation"
        },
        {
          title: "时间",
          key: "time"
        }
      ],
      data1: [
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        }
      ]
    };
  },

  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("myChart"),
        "light"
      );
      let myChart1 = this.$echarts.init(
        document.getElementById("myChart1"),
        "light"
      );
      let myChartZhu = this.$echarts.init(
        document.getElementById("myChartZhu"),
        "light"
      );
      // 绘制图表
      myChart.setOption({
        title: {
          text: "创建机构",
          subtext: "纯属虚构",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["全部机构", "创建机构"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 85, name: "全部机构" },
              { value: 15, name: "创建机构" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
      myChart1.setOption({
        title: {
          text: "创建机构",
          subtext: "纯属虚构",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["全部机构", "创建机构"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 85, name: "全部机构" },
              { value: 15, name: "创建机构" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
      myChartZhu.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      });
    },
    handleTabRemove(name) {
      this["tab" + name] = false;
    }
  }
};
</script>

<style scoped>
</style>
